<template>
	<div>
	<!-- 	<div style='height:108px;position: fixed;top:0;left:0 ;width:100%' > -->
		<div style="width:100%;text-align: center;margin-bottom:38px;margin-top:10px ;">
			<h1 class="pin">易厨优品</h1>
		</div>
		
			
			<van-tabs v-model="active" :swipe-threshold="5" :ellipsis='boolean'>
			  <van-tab title="调味酱料" >
				  <div style="width:100%;text-align: center;margin-bottom:19px;margin-top:53px">
				  	<h2 class="jingxuan">精选优品</h2>
				  </div>
				  
				  <van-row type="flex">
				    <van-col span="22" >
				  	<van-col span="10" v-for='(item,index) in list' :key="index"  offset="2" style="margin-bottom: 50px">
				  	  <div>
						  <img :src="item.pimg" style="width:100%;" @click="showPopup(index,item.pid)" >
						</div>
							
							
							<van-popup
							  v-model="show"
							  position="bottom"
							  :style="{ height: '90%' }">
							  
							  
								<div>
								<div style="width:100%;"><img :src="p.pimg" style="width:100%;height:300px"></div>
								<p style="font-size:18px;color:#101010;margin-top:10px">{{p.pprice}}</p>
								<p style="font-size:18px;color:#101010;margin-top:10px">{{p.pname}}</p>
								<van-row type="flex">
								 <van-col span="2"></van-col>
								<van-col span="20">
									<van-row style="margin-top:10px">
										<van-col span="4"><button @click="jian" style="height:20px;width:20px">-</button></van-col>
										<van-col span="16"><input type="text" v-model="input" ref="inp"></van-col>
										<van-col span="4"><button @click="jia">+</button></van-col>
									</van-row>
								</van-col>
								  <van-col span="2"></van-col>	
								  </van-row>
							 </div>
							
							
							
							
							<van-goods-action>
							  <van-goods-action-icon
								icon="chat-o"
								text="客服"
								@click="onClickIcon"
							  />
							  <van-goods-action-icon
								icon="cart-o"
								text="购物车"
								@click="onClickIcon"
							  />
							  <van-goods-action-button
								type="warning"
								text="加入购物车"
								@click="onClickButton(p.pid)"
							  />
							  <van-goods-action-button
								type="danger"
								text="立即购买"
								@click="onClickButtons"
							  />
							</van-goods-action>
							
							
							</van-popup>
							 
							
								
						
							
							
							
							
							
							
					 
				  	  <p style='color:#101010;font-size:18px;margin:7px 0 5px 0;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis'>{{item.pname}}</p>
				  	  <p style='color:#D20905;font-size:18px;'>{{item.pprice}}</p>
				  	</van-col>
				    </van-col>
				  </van-row>
			  </van-tab>
			  <van-tab title="厨具">
				   <div style="width:100%;text-align: center;margin-bottom:19px;margin-top:53px">
				  	<h2 class="jingxuan">精选优品</h2>
				  </div>
				  
				  <van-row type="flex">
				    <van-col span="22" >
				  	<van-col span="10" v-for='(it,index) in arr' :key="index"  offset="2" style="margin-bottom: 50px">
				  	  <div><img :src="it.pimg" style="width:100%;"></div>
				  	  <p style='color:#101010;font-size:18px;margin:7px 0 5px 0;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis'>{{it.pname}}</p>
				  	  <p style='color:#D20905;font-size:18px;'>{{it.pprice}}</p>
				  	</van-col>
				    </van-col>
				  </van-row>
			  </van-tab>
			  <van-tab title="烘焙" >
				   <div style="width:100%;text-align: center;margin-bottom:19px;margin-top:53px">
				  	<h2 class="jingxuan">精选优品</h2>
				  </div>
				  
				  <van-row type="flex">
				    <van-col span="22" >
				  	<van-col span="10" v-for='(item1,index) in arr1' :key="index"  offset="2" style="margin-bottom: 50px">
				  	  <div><img :src="item1.pimg" style="width:100%;"></div>
				  	  <p style='color:#101010;font-size:18px;margin:7px 0 5px 0;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis'>{{item1.pname}}</p>
				  	  <p style='color:#D20905;font-size:18px;'>{{item1.pprice}}</p>
				  	</van-col>
				    </van-col>
				  </van-row>
			  </van-tab>
			  <van-tab title="厨房电器"> <div style="width:100%;text-align: center;margin-bottom:19px;margin-top:53px">
				  	<h2 class="jingxuan">精选优品</h2>
					
				  </div>
				  
				  <van-row type="flex">
				    <van-col span="22" >
				  	<van-col span="10" v-for='(item2,index) in arr2' :key="index"  offset="2" style="margin-bottom: 50px">
				  	  <div>
						  
						  <img :src="item2.pimg" style="width:100%">
						
					  </div>
				  	  <p style='color:#101010;font-size:18px;margin:7px 0 5px 0;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis'>{{item2.pname}}</p>
				  	  <p style='color:#D20905;font-size:18px;'  >{{item2.pprice}}</p>
				  	</van-col>
				    </van-col>
				  </van-row></van-tab>
			  <van-tab title="精选美食">
				   <div style="width:100%;text-align: center;margin-bottom:19px;margin-top:53px">
				  	<h2 class="jingxuan">精选优品</h2>
					
				  </div>
				  
				  <van-row type="flex">
				    <van-col span="22" >
				  	<van-col span="10" v-for='(item3,index) in arr3' :key="index"  offset="2" style="margin-bottom: 50px">
				  	  <div><img :src="item3.pimg" style="width:100%;"></div>
				  	  <p style='color:#101010;font-size:18px;margin:7px 0 5px 0;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis'>{{item3.pname}}</p>
				  	  <p style='color:#D20905;font-size:18px;'>{{item3.pprice}}</p>
						
				  	</van-col>
				    </van-col>
				  </van-row>
			  </van-tab>
			</van-tabs>
		
		
	
		
	</div>
</template>

<script>
	import axios from 'axios'
	export default({
		name:'City',
		data(){
			return{
				list:[],
				active: 0,
				boolean:false,
				show: false,
				p:'',
				input:1,
				arr:[],
				arr1:[],
				arr2:[],
				arr3:[],
				pnum:''
			}
		},
		methods:{
			showPopup(i,pid){
				 
				
			  axios({
				  url:"http://jx.xuzhixiang.top/ap/api/detail.php",
				  params:{id:pid}
			  }).then((res)=>{
				  console.log(res.data.data)
				 this.show = true;
				 this.p = res.data.data
			  })
			 
			},
			jia(){
				this.input=this.input+1
			},
			jian(){
				if(this.input==1){
					return
				}else if(this.input<1){
					this.input=1
				}
					else {
						this.input=this.input-1
					}
			},
			
			onClickIcon() {
			  Toast('点击图标');
			},
			onClickButton(pid) {
				
				let pnum=this.input
				axios({
					url:'http://jx.xuzhixiang.top/ap/api/add-product.php',
					params:{uid:14518,pnum,pid},
					
				}).then((res)=>{
					
				})
			},
			onClickButtons(){
				
			}
		},
		mounted(){
			axios({
				url:'http://jx.xuzhixiang.top/ap/api/productlist.php',
				params:{uid:14518}
			}).then((res)=>{
				this.list=res.data.data
			}),
			axios({
				url:'http://jx.xuzhixiang.top/ap/api/productlist.php',
				params:{uid:14519}
			}).then((res)=>{
				this.arr=res.data.data
			}),
			axios({
				url:'http://jx.xuzhixiang.top/ap/api/productlist.php',
				params:{uid:14520}
			}).then((res)=>{
				this.arr1=res.data.data
			}),
			axios({
				url:'http://jx.xuzhixiang.top/ap/api/productlist.php',
				params:{uid:14523}
			}).then((res)=>{
				this.arr2=res.data.data
			}),
			axios({
				url:'http://jx.xuzhixiang.top/ap/api/productlist.php',
				params:{uid:14524}
			}).then((res)=>{
				this.arr3=res.data.data
			})
		}
	})
</script>

<style>
	*{margin:0;padding:0;}
	.pin{font-size:28px;color:#1E1E1E;font-weight: normal;}
	.title{font-size:18px;font-weight: normal;color:#646363;text-align:center}
	.jingxuan{font-size:20px;font-weight:normal;color:#101010}
	span{font-size:16px}
</style>
